<template>
    <el-container class="contact-content">
        <el-header height="36px">
            <el-row class="search-bar">
                <el-col :span="3" class="aaa" :class="{'active-tag':currentTag===0}" @click="currentTag=0">全部人员</el-col>
<!--                <el-col :span="3" class="aaa" :class="{'active-tag':currentTag===1}" @click="currentTag=1"></el-col>-->
                <el-col :offset="7" :span="14">
                    <el-row>
                        <el-col :span="10" style="text-align: left">
                            <template v-if="panel==='0'">
                                组织节点：{{organizationNode.name?organizationNode.name:'所有节点'}}
                            </template>
                            <template v-if="panel==='1'">
                                当前组：
                                <el-tag>
                                    {{groupNode.groupName?groupNode.groupName:'所有组'}}
                                </el-tag>
                            </template>
                        </el-col>
                        <el-col :span="10" style="position: relative">
                            <el-input v-model="search.keyword" placeholder="请输入姓名或电话搜索" class="keyword-input" size="small"/>
                            <el-button :icon="Search" type="text" class="search-bn" @click="keywordSearchClick(search.keyword)" size="small"/>
                        </el-col>
                        <el-col :span="3">
                            <el-button plain class="advanced-search" @click="advancedSearchClick" size="small">高级搜索</el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                :data="pagingTableData"
                v-loading="loading"
                element-loading-text="正在加载字典表数据"
                ref="contactsTableRef"
                :resizable="true" size="small" border>
                <el-table-column label="是否在线" width="70" align="center">
                    <template #default="s">
                        <template v-if="s.row.online===1">
                            <el-tooltip content="在线" placement="top"><Monitor color="red" width="20px" height="20px"></Monitor></el-tooltip>
                        </template>
                        <template v-else>
                            <el-tooltip content="未在线" placement="top"><Monitor color="gray" width="20px" height="20px" title="离线"/></el-tooltip>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="empName" width="100"/>
                <el-table-column label="公司名称" prop="company"/>
                <el-table-column label="所在部门" prop="deptName"/>
                <el-table-column label="移动电话" prop="mobilePhone"/>
                <el-table-column label="直接上级" prop="superior"/>
                <el-table-column label="所任职位" prop="position"/>
                <el-table-column label="邮箱地址" prop="email" width="148"/>
                <el-table-column label="操作">
                    <template #default="s">
                        <el-tooltip content="发送短信" placement="top">
                            <el-button type="text" size="small" :icon="ChatDotSquare"></el-button>
                        </el-tooltip>
                        <el-tooltip content="发送邮件" placement="top">
                            <el-button type="text" size="small" :icon="Message"></el-button>
                        </el-tooltip>
                        <el-tooltip content="添加至分组" placement="top">
                            <el-button type="text" size="small" :icon="Star" @click="collectClick(s.row)"></el-button>
                        </el-tooltip>
                        <template v-if="panel==='1'">
                            <el-tooltip content="移出分组" placement="top">
                                <el-button type="text" size="small" :icon="Remove" @click="removeCollect(s.row)"></el-button>
                            </el-tooltip>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top: 10px">
                <el-col :span="10" :offset="14">
                    <el-pagination layout="prev, pager, next,jumper,total,slot"
                                   :page-size="pageSize"
                                   :total="pageTotal"
                                   @current-change="currentPageChange" background style="float: right"></el-pagination>
<!--                    :pager-count="pagerCount"-->
                </el-col>
            </el-row>
        </el-main>
        <collect-contact-form ref="collectContactFormRef"/>
        <el-drawer v-model="searchDrawer" direction="ttb">
            <template #title>
                <h4>查询员工联系方式</h4>
            </template>
            <!--                <template #default>-->
            ghdf
            <el-form label-width="120px" label-position="left" label-suffix="：" ref="searchFormRef">
                <el-row>
                    <el-col>
                        <el-form-item label="姓名">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                    <el-col>
                        <el-form-item label="直接上级">
                            <el-input/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            dgfh
            <!--                </template>-->
            <template #footer>
                <!--                    <div style="flex: auto">-->
<!--                <el-button @click="cancelClick">cancel</el-button>-->
<!--                <el-button type="primary" @click="confirmClick">confirm</el-button>-->
                <!--                    </div>-->
            </template>
        </el-drawer>
    </el-container>
</template>

<script>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {Search,ChatDotSquare,Message,Star,Remove} from '@element-plus/icons-vue';
import CollectContactForm from "../form/CollectContactForm.vue";
import {queryUserCollectContact, removeCollectGroupContacts} from "../../../../network/sys/contacts-group-detail";

export default {
    name: "ContactContent",
    components: {CollectContactForm},
    props: {
        panel: {
            type: String,
            default: '0'
        },//0为组织面板、1为用户组面板
        organizationNode: {
            type: Object,
            default: {
                id: null,
                name: null,
                type: null
            }
        },//当前组织节点
        groupNode:{
            type: Object,
            default: {
                id: null,
                groupName: null
            }
        },//当前个人组节点
    },
    setup(props,{emit}){
        const globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const data = reactive({
            search:{
                keyword: null,
            },
            loading: false,
            tableData: [],
            contactsData: [],
            pageNum: 1,
            pageSize: 12,
            pagerCount: 3,
            pageTotal: 100,
        })
        const collectContactFormRef = ref(null);
        const searchDrawer = ref(false);
        const executionFn = reactive({
            searchActive(){

            },
            currentPageChange(index){
                data.pageNum = index;
            },
            filterOrganizationNode(){
                if(props.organizationNode.id!==null){//存在选中节点才会执行过滤，不存在选中节点不会执行
                    let result = [];
                    let {id,type} = props.organizationNode;
                    let key = type === 0 ? 'companyId' : 'deptId';
                    globalProperties.$store.state.organizationContacts.forEach(e=>{
                        if(e[key] === id){
                            let cloneObj = globalProperties.$utils.clone(e);
                            result.push(cloneObj);
                        }
                    })
                    data.tableData = result;
                    data.contactsData = result;
                    data.pageTotal = data.contactsData.length;
                }
            },
            filterGroupNode(){
                if(props.groupNode.id!==null){
                    let result  = [];
                    let {id,groupName} = props.groupNode;
                    globalProperties.$store.state.userGroupContacts.forEach(e=>{
                        if(id===e.groupId){
                            let cloneObj = globalProperties.$utils.clone(e);
                            result.push(cloneObj);
                        }
                    })
                    data.tableData = result;
                    data.contactsData = result;
                    data.pageTotal = data.contactsData.length;
                }
            },
            filterOrgnContactsByKeyword(keyword){
                //1.第一层过滤，组织节点过滤。
                executionFn.filterOrganizationNode();
                //2、第二层过滤，关键字过滤
                // if(!globalProperties.$utils.isEmpty(keyword)){
                let result = [];
                data.contactsData.forEach(e=>{
                    if(e.empName.includes(keyword) || e.mobilePhone.includes(keyword) || globalProperties.$utils.isEmpty(keyword)) {
                        let cloneObj = globalProperties.$utils.clone(e);
                        result.push(cloneObj);
                    }
                })
                data.tableData = result;
                // }
                data.pageTotal = data.tableData.length;
            },
            filterUserContactsBuKeyword(keyword){
                data.tableData = data.contactsData;
                if(!globalProperties.$utils.isEmpty(keyword)){
                    let result = [];
                    data.contactsData.forEach(e=>{
                        if(e.empName.includes(keyword) || e.mobilePhone.includes(keyword)) {
                            let cloneObj = globalProperties.$utils.clone(e);
                            result.push(cloneObj);
                        }
                    })
                    data.tableData = result;
                }

            }
        });
        const clickEvent = reactive({
            advancedSearchClick(){
                searchDrawer.value = true;
            },
            keywordSearchClick(keyword){
                if(props.panel==='0'){
                    executionFn.filterOrgnContactsByKeyword(keyword);
                }else if (props.panel==='1'){
                    executionFn.filterUserContactsBuKeyword(keyword);
                }
            },
            collectClick(row){
                // console.log('收藏row',row);
                // console.log('收藏员工编号',row.empId);
                collectContactFormRef.value.visible = true;
                collectContactFormRef.value.setEmpIds([row.empId]);
            }
        });
        return{
            searchDrawer,
            collectContactFormRef,
            ...toRefs(data),
            ...toRefs(clickEvent),
            ...toRefs(executionFn),
            Search,ChatDotSquare,Message,Star,Remove
        }
    },
    data(){
        return{
            currentTag: 0
        }
    },
    methods:{
        removeCollect(row){
            this.$operate.confirm({
                title: '移除联系人',
                hint: '你确认将该联系人移出群组吗？',
                executeFn:()=>{
                    removeCollectGroupContacts([row.groupDetailId]).then(vo=>{
                        this.$response.handle({
                            data: vo,
                            success: '移除成功',
                            successFn: async ()=>{
                                let userGroupContacts = [];
                                await queryUserCollectContact().then(vo=>{
                                    console.log('用户群组；',vo);
                                    userGroupContacts = vo.data;
                                })
                                this.$store.commit('setUserGroupContacts',userGroupContacts);
                                this.keywordSearchClick();
                            },
                            log: '移除结果'
                        })
                    })
                }
            })
        },
        loadPanelTableData(arr){
            this.tableData = [];
            this.contactsData = [];
            arr.forEach(e=>{this.contactsData.push(e);})
            this.contactsData.forEach(e=>{
                this.tableData.push(e)
            })
            this.pageTotal = this.tableData.length;
        },
        switchPanelData(){
            if(this.panel==='0'){
                this.loadPanelTableData(this.$store.state.organizationContacts);
                this.filterOrganizationNode();
            }else if(this.panel==='1'){
                this.loadPanelTableData(this.$store.state.userGroupContacts);
                this.filterGroupNode();
            }
        }
    },
    computed:{
        pagingTableData(){
            // this.pageNum;
            let start = (this.pageNum-1) * this.pageSize;
            let end = this.pageNum * this.pageSize;
            return this.tableData.slice(start,end);
        }
    },
    watch: {
        '$store.state.organizationContacts'(){
            // console.log('监听：',this.$store.state.organizationContacts)
            console.log('组织通讯录数据加载成功...')
            this.switchPanelData();
        },
        '$store.state.userGroupContacts'(){
            console.log('用户组通讯录数据加载成功...')
            this.switchPanelData();
        },
        organizationNode(){
            // console.log('organizationNode',this.organizationNode);
            this.filterOrganizationNode();
        },
        groupNode(){
            // console.log('groupNode',this.groupNode);
            this.filterGroupNode();
        },
        panel(){
            this.switchPanelData();
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.contact-content{
}
.el-main{
    padding: 0;
}
.el-header{
    padding: 0;
}
.search-bar{
    height: 36px;
}
.search-bar .el-col {
    text-align: center;
    line-height: 32px;
    font-size: 13px;
}
.active-tag{
    border-bottom: 3px solid #2db7f5;
    color: #2db7f5;
}
.search-bn{
    color: #666666;
    position: absolute;
    top: 6px;
    right: 10px;
}
.advanced-search{
    border-radius: 0;
    position: relative;
}
.el-table{
    width: 100%;
}
.aaa{
    cursor: pointer;
}
</style>
<style>
.keyword-input>.el-input__inner{
    border-radius: 0;
}
</style>